<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by GaoXiang
Date: 2017-06-06 10:01:02 星期二
Version: 1.0
停车场分区表添加页面
--%>
<style>
    .show-fc{
        margin-left:10px;
        margin-top: 10px;
        float: left;
    }
    .uploaded-image{
        /*max-width: 120px;*/
        max-height: 120px;
        position: relative;
        display: inline;
    }
    .uploaded-btn{
        margin-top: 10px;
        height: 120px;
        width: 90px;
    }
    .del-image{
        width: 15px;
        position: relative;
        display: inline;
        right: 25px;
        bottom: 53px;
    }
</style>
<div class="portlet light">

    <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <form action="#" class="form-horizontal" id="save-module">
            <div class="form-body">

                <div class="row">
                    <div class="col-md-6 hide">
                        <div class="form-group">
                            <label class="control-label col-md-3">ID</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" id="id" name="id" value="${longId}" placeholder="默认生成，ID">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">选择停车场</label>
                            <div class="col-md-9">
                                <c:if test="${type != 6}">
                                <div class="input-group">
                                    <div class="input-icon">
                                        <i class="fa fa-lock fa-fw"></i>
                                        </c:if>
                                        <input id="parkingId" class="form-control" type="hidden" name="parkingId"
                                        <c:if test="${type == 6}"> value="${parking.id}"</c:if> >
                                        <input type="text" id="parkingName" class="form-control" readonly="readonly" required name="parkingName" placeholder="所属停车场"
                                        <c:if test="${type == 6}"> value="${parking.name}"</c:if> >
                                        <c:if test="${type != 6}">
                                    </div>

                                    <span class="input-group-btn">
                                        <button id="checkAccount" class="btn btn-success" type="button"  onclick="selectParking();"  >
                                        <i class="fa fa-arrow-left fa-fw"></i>  选择停车场
                                    </button>
                                    </span>
                                </div>
                                </c:if>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">层数</label>
                            <div class="col-md-9">
                                <select class="form-control" name="floor">
                     <c:if test="${type == 6}">
                       <c:forEach  var="x" begin="1"  end ="${floor}" step="1">
                          <option value="${x}"> 第${x}层 </option>
                       </c:forEach>
                     </c:if>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">分区名称</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" required name="name" placeholder="分区名称">
                            </div>
                        </div>
                    </div>

                    <input  class="form-control" required name="img"  id="img" type="hidden">
                    <div class="col-md-12" >
                        <div class="col-md-2">
                            <input type="file"  required name="house"  class="hidden"  id="houseFile"/>
                            <button  class="btn btn-success uploaded-btn" type="button"  onclick="$('#houseFile').click();" >
                                <span class="glyphicon glyphicon-home"></span><br>停车场分区地图
                            </button>
                        </div>
                        <div class="col-md-10" id="houseImages" ></div>
                    </div>
                    <input  class="form-control" required name="img2"  id="img2" type="hidden">
                    <div class="col-md-12" >
                        <div class="col-md-2">
                            <input type="file"  required name="house2"  class="hidden"  id="houseFile2"/>
                            <button  class="btn btn-success uploaded-btn" type="button"  onclick="$('#houseFile2').click();" >
                                <span class="glyphicon glyphicon-home"></span><br>分区停车位地图
                            </button>
                        </div>
                        <div class="col-md-10" id="houseImages2" ></div>
                    </div>
                <%--    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">intro</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" required name="intro" placeholder="intro">
                            </div>
                        </div>
                    </div>--%>
                </div>
            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="button" class="btn green" onclick="save();">保存停车场分区表</button>
                                <button type="button" class="btn default" onclick="layer.close(layer_addModule);">取消</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"> </div>
                </div>
            </div>
        </form>
        <!-- END FORM-->
    </div>
</div>
<!-- script 开始 -->
<script>
    function deleteImage(id) {
        $.post("/parkingzone/deleteImage",{"id":id},null);
        $("#divHouse"+id).remove();
    }
    $(function () {
        /!*上传 地图*!/
        $("#houseFile").fileupload({
            url: "/parkingzone/houseImages",
            dataType: 'json',
            formData: {"parkingzoneId":$("#id").val()},
            add: function (e, data) {
                data.submit();
            },
            done: function (e, data) {
                var result = data.result;
                var image = result.data;
                var imgUrl = image.url;
                var  imgId=image.id;
                console.info("图片的编号"+imgId);
                if (result.success == false) {
                    alert("上传失败");
                } else {
                    document.getElementById('houseImages').innerHTML = '';
                    var div = $("<div class='show-fc' id='divHouse"+imgId+"'>");
                    var img = $("<img  src='/sysImage/showImg?src="+imgUrl+"'class='thumbnail uploaded-image' />");
                    var imgx = $("<img class='del-image' id="+imgId+"  onclick='deleteImage(this.id)' src='/images/deleteLog/deleteImg.png' >");
                    div.append(img).append(imgx);
                    $("#houseImages").append(div);
                    document.getElementById('img').value=imgId;
            }
            },
            progressall: function (e, data) {
            }

        });
    })
    $(function () {
        /!*上传 地图*!/
        $("#houseFile2").fileupload({
            url: "/parkingzone/houseImages2",
            dataType: 'json',
            formData: {"parkingzoneId":$("#id").val()},
            add: function (e, data) {
                data.submit();
            },
            done: function (e, data) {
                var result = data.result;
                var image = result.data;
                var imgUrl = image.url;
                var  imgId=image.id;
                console.info("图片的编号"+imgId);
                if (result.success == false) {
                    alert("上传失败");
                } else {
                    document.getElementById('houseImages2').innerHTML = '';
                    var div = $("<div class='show-fc' id='divHouse"+imgId+"'>");
                    var img = $("<img  src='/sysImage/showImg?src="+imgUrl+"'class='thumbnail uploaded-image' />");
                    var imgx = $("<img class='del-image' id="+imgId+"  onclick='deleteImage(this.id)' src='/images/deleteLog/deleteImg.png' >");
                    div.append(img).append(imgx);
                    $("#houseImages2").append(div);
                    document.getElementById('photo').value=imgId;
                }
            },
            progressall: function (e, data) {
            }
        });
    })
    $(function(){
        //初始化页面
        initPage();
    });
    function selectParking(){
        $.post("/parking/chooseParking",null,function(html){
            window.layer_resModule = layer.open({
                id:"resModule",
                type: 1,
                title:"选择停车场",
                area:['900px','600px'],
                content: html,
                anim:1,
                shadeClose:false,
                cancel: function(){}
            });
        });
    }

    /**
     * 保存停车场分区表
     */
    function save(){
        var param = tools.formParams("save-module");
        if(tools.valid("save-module")){
            tools.post("/parkingzone/save",param,function(data){
                if(data.success){
                    layer.msg('停车场分区表保存成功', {icon: 1,time:1000},function(){
                        //刷新列表页面
                        toPage(null);
                        //关闭弹窗
                        layer.close(layer_addModule);
                    });
                }else{
                    tools.errorTip(data.code,data.data);
                }
            });
        }
    }

</script>
<!-- script 结束 -->